wordpress添加机甲风分类板块-瀚星阁

所有魔改代码均为html+css

html代码

<div class="recent-post-item wow animate__zoomIn" style="height: auto; width: 100%; padding: 0px; visibility: visible; animation-name: zoomIn;"
data-wow-duration="" data-wow-delay="" data-wow-offset="" data-wow-iteration="">
	<div class="recent-post-item-headline">
		<i class="fa-sharp fa-solid fa-sim-card">
		</i>
		<span>
			分类
		</span>
	</div>
	<div id="categoryBar">
		<ul class="categoryBar-list">
			<li class="categoryBar-list-item">
				<a class="categoryBar-list-link" href="/categories/%E2%98%95Akilar%E3%81%AE%E9%A9%AC%E5%8D%A1%E9%BE%99/"
				data-pjax-state="">
					☕Akilarの马卡龙
				</a>
				<span class="categoryBar-list-count">
					5
				</span>
			</li>
			<li class="categoryBar-list-item">
				<a class="categoryBar-list-link" href="/categories/%F0%9F%8D%A1Akilar%E3%81%AE%E7%B3%96%E8%91%AB%E8%8A%A6/"
				data-pjax-state="">
					🍡Akilarの糖葫芦
				</a>
				<span class="categoryBar-list-count">
					94
				</span>
			</li>
			<li class="categoryBar-list-item">
				<a class="categoryBar-list-link" href="/categories/%F0%9F%8D%A8Akilar%E3%81%AE%E6%A3%89%E8%8A%B1%E7%B3%96/"
				data-pjax-state="">
					🍨Akilarの棉花糖
				</a>
				<span class="categoryBar-list-count">
					6
				</span>
			</li>
			<li class="categoryBar-list-item">
				<a class="categoryBar-list-link" href="/categories/%F0%9F%8D%ABAkilar%E3%81%AE%E5%B7%A7%E5%85%8B%E5%8A%9B/"
				data-pjax-state="">
					🍫Akilarの巧克力
				</a>
				<span class="categoryBar-list-count">
					3
				</span>
			</li>
			<li class="categoryBar-list-item">
				<a class="categoryBar-list-link" href="/categories/%F0%9F%8D%ACAkilar%E3%81%AE%E6%B3%A1%E6%B3%A1%E7%B3%96/"
				data-pjax-state="">
					🍬Akilarの泡泡糖
				</a>
				<span class="categoryBar-list-count">
					358
				</span>
			</li>
			<li class="categoryBar-list-item">
				<a class="categoryBar-list-link" href="/categories/%F0%9F%8D%B0Akilar%E3%81%AE%E5%A4%AA%E5%A6%83%E7%B3%96/"
				data-pjax-state="">
					🍰Akilarの太妃糖
				</a>
				<span class="categoryBar-list-count">
					23
				</span>
			</li>
		</ul>
	</div>
</div>

css代码

:root {
    --recent-post-background: rgba(50,50,50,0.9);
    --recent-post-color: #fff;
    --recent-post-content-border: rgba(117,118,120,0.8);
    --recent-post-title-background: rgba(40,40,40,0.95);
    --recent-post-title-color: #fff;
    --recent-post-title-corner-background: rgba(153,54,44,0.8);
    --recent-post-title-corner-color: rgba(233,233,233,0.9);
}
.recent-post-item:has(#categoryBar) .recent-post-item-headline {
    border-top: 12px solid var(--recent-post-title-corner-background);
    border-left: 8px solid var(--recent-post-title-corner-background);
    -webkit-box-shadow: 0 0 10px var(--recent-post-content-border) inset;
    box-shadow: 0 0 10px var(--recent-post-content-border) inset;
    border-top-left-radius: 3px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 20px;
    background: var(--recent-post-title-background);
    color: var(--recent-post-color);
    min-width: 8em;
    width: fit-content;
    clip-path: polygon(0 0,55px 0,60px 10px,calc(100% - 15px) 10px,100% 30px,100% 100%,30px 100%,8px 30px,0 25px);
    padding: 0 1em 0 1em;
    margin: 0 0 -20px 0;
    position: relative;
    top: -20px;
    left: 10px;
}
.recent-post-item:has(#categoryBar) {
    clip-path: polygon(0px 0px, 100% 0px, 100% 30px, calc(100% - 5px) 30px, 100% 45px, 100% 50px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0px calc(100% - 5px), 0px 45px, 10px 30px, 0px 30px);
    background: linear-gradient(to bottom,transparent 30px,var(--recent-post-background) 31px,var(--recent-post-background)) !important;
    padding: 20px 0px 0px !important;
}

.recent-post-item:has(#categoryBar) .recent-post-item-headline::after {
    content: "akilar";
    position: absolute;
    bottom: 0px;
    font-size: 12px;
    display: block;
    right: 0px;
    line-height: 1em;
    color: var(--recent-post-title-corner-color);
    width: fit-content;
    height: 1em;
    padding: 0px 5px 0px 10px;
    background: var(--recent-post-title-corner-background);
    clip-path: polygon(5px 0px, 100% 0px, 100% 100%, 0px 100%);
}

.recent-post-item:has(#categoryBar) {
    clip-path: polygon(0px 0px, 100% 0px, 100% 30px, calc(100% - 5px) 30px, 100% 45px, 100% 50px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0px calc(100% - 5px), 0px 45px, 10px 30px, 0px 30px);
    background: linear-gradient(to bottom,transparent 30px,var(--recent-post-background) 31px,var(--recent-post-background)) !important;
    padding: 20px 0px 0px !important;
}

#categoryBar {
    width: 100% !important;
}

ul.categoryBar-list {
    margin: 5px 5px 0px !important;
    padding: 0px !important;
}

li.categoryBar-list-item {
    font-weight: 700;
    display: inline-block;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 25%, rgba(16, 16, 16, 0) 100%);
    border-radius: 10px;
    box-shadow: rgba(50, 50, 50, 0.3) 50px 50px 50px 50px inset;
    overflow: hidden;
    height: 180px !important;
    margin: 5px 0.5% 0px !important;
    padding: 25px 0px 25px 25px !important;
    background-size: 100% !important;
    background-position: center center !important;
}

li.categoryBar-list-item:hover {
    box-shadow: rgba(50, 50, 50, 0.6) 500px 50px 50px 50px inset;
    background-size: 110% !important;
}

li.categoryBar-list-item:hover span.categoryBar-list-count::after {
    transition: all 0.5s ease 0s;
    transform: translate(-100%, 0px);
}

a.categoryBar-list-link {
    color: rgb(255, 255, 255) !important;
    font-size: 20px !important;
}

a.categoryBar-list-link::before {
    content: "|" !important;
    color: rgb(255, 255, 255) !important;
    font-size: 20px !important;
}

a.categoryBar-list-link::after {
    content: "";
    position: relative;
    width: 0px;
    bottom: 0px;
    display: block;
    height: 3px;
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
}

a.categoryBar-list-link:hover::after {
    width: 90%;
    left: 1%;
    transition: all 0.5s ease 0s;
}

span.categoryBar-list-count {
    display: block !important;
    color: rgb(255, 255, 255) !important;
    font-size: 20px !important;
}

span.categoryBar-list-count::before {
    content: "📕" !important;
    padding-right: 6px !important;
}

span.categoryBar-list-count::after {
    padding: 5px;
    position: relative;
    right: -100%;
    display: block !important;
    color: rgb(255, 255, 255) !important;
    /* font-size: 20px !important; */
}

li.categoryBar-list-item:nth-child(1) {
    background: url("https://img.zcool.cn/community/01b71361dd8ce311013f01cdc36e2a.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100");
}

li.categoryBar-list-item:nth-child(2) {
    background: url("https://img.zcool.cn/community/01593e61dd8ce411013e8cd0aa8bab.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100");
}

li.categoryBar-list-item:nth-child(3) {
    background: url("https://img.zcool.cn/community/0183d061dd8ce511013e8cd04451eb.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100");
}

li.categoryBar-list-item:nth-child(4) {
    background: url("https://img.zcool.cn/community/01729c61dd8ce711013f01cd0f12a3.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100");
}

li.categoryBar-list-item:nth-child(5) {
    background: url("https://img.zcool.cn/community/01a6b161e1626511013f01cd9953a2.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100");
}

li.categoryBar-list-item:nth-child(6) {
    background: url("https://img.zcool.cn/community/01f28461e1626511013f01cd1d05d8.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,q_100");
}

li.categoryBar-list-item:nth-child(1) > span::after {
    content: "长篇小说连载" !important;
}

li.categoryBar-list-item:nth-child(2) > span::after {
    content: "杂谈教程" !important;
}

li.categoryBar-list-item:nth-child(3) > span::after {
    content: "玩转Win10" !important;
}

li.categoryBar-list-item:nth-child(4) > span::after {
    content: "Ubuntu指南" !important;
}

li.categoryBar-list-item:nth-child(5) > span::after {
    content: "个人日记" !important;
}

li.categoryBar-list-item:nth-child(6) > span::after {
    content: "诗词歌赋" !important;
}

li.categoryBar-list-item {
    width: 32.3% !important;
}

@media screen and (max-width: 650px) {
    li.categoryBar-list-item {
        width: 48% !important;
        height: 150px !important;
        margin: 5px 1% 0px !important;
    }
}

.categoryBar-list {
    max-height: 190px;
    overflow: auto;
}

@media screen and (max-width: 650px) {
    .categoryBar-list {
        max-height: 160px;
    }
}